<link href="__CSS__/toastr.css" rel="stylesheet"/>
<script src="__JS__/toastr.js"></script>
<style>
    .like_selection{
        width: 20px;height: 20px;cursor: pointer;
    }

    .dislike_selection{
        margin-top:30%;width: 20px;height: 20px;cursor: pointer;
    }

    .like_count{
        position: absolute;top: 0%;
    }

    .dislike_count{
        position: absolute;top: 50%;
    }
</style>



{in name="$r.id" value="$edit_records"}
<div id="oneMsg_{$r.id}"  style="position:relative;cursor: move;float: left;margin:0 0 10px 30px;" draggable="true" ondragstart="drag(event)"
     onmouseover = "$('#del_btn_{$r.id}').show();
        hasRecordCmt('{$r.id}');
        $('#cmt_btn_{$r.id}').show();
        $(this).css('border','none');"
     onmouseout="$('#del_btn_{$r.id}').hide();$('#cmt_btn_{$r.id}').hide();$(this).css('border','none')"
    ><!--满足flex布局的元素块-->


    <div class="oneMsg" style="/*position: relative;height: 100px;*/" >


        {if condition="$prjInfo['tool_type'] == '共感图'"}
        <div class="tooltip_bottom" style="float:none;">
        <div id="progress_div_{$r.id}" style="width: 300px;">
            <el-progress id="progress_{$r.id}" :color="color" :percentage="({$r.adopt_count}/{$memberSize})*100" :format="format" ></el-progress>

        </div>

        <script type="module">
            new Vue({
                el: '#progress_div_{$r.id}',
                data: function() {
                    return {  }
                },
                methods: {
                    format(percentage) {
                        return "{$r.adopt_count}/{$memberSize}";
                        //return percentage > 50 ? '满' : `${percentage}%`;
                    },
                    color(percentage){
                        return percentage > 50 ? 'green' : 'yellow';
                    }
                }
            });

        </script>


            <div class="tooltiptext_bottom" style="left: 13%;width: auto;min-width: initial;">"通过"进度</div>
        </div>
        {/if}

        {if condition="$prjInfo['tool_type'] == 'HMW'"}
        <div style="border:1px solid lightgray;">
            <div style="padding: 3px 0;margin: 0px 5px;">我们应该如何</div>
        </div>
        {/if}

        <!--textarea循环渲染，id不要重复-->
        <textarea  maxlength="100" id="record_{$r.id}"  onclick="$(this).css('cursor','text')" onblur="$(this).css('cursor','move')" style="border:none;cursor: move;background-color: {$r.color}" oninput="onkeyupForTextarea('{$r.id}')" class="record_area">{$r.contents}</textarea>


        <div id="text_count_{$r.id}" class="text_count" style="">
            {:iconv_strlen($r.contents)}/100
        </div>


        <block class="btn_block">
            <!--<button id="edit_btn_{$r.id}" style="display: none" class="edit_btn" onclick="editRecord( '{$r.id}')" >
                提交更改
            </button>-->
            <div class="del_btn" id="del_btn_{$r.id}" onclick="delRecord('{$toolId}', '{$r.id}') " style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px; display:none;color: red;">
                <img onmouseover="$(this).parents('.del_btn').css('background-color', '#e3b3b5');"
                     onmouseout="$(this).parents('.del_btn').css('background-color', 'inherit');"
                     style="padding:5px 5px;width: 24px;height: 24px;cursor: pointer;" src="__IMG__/delete.png"/>
            </div>

            <div class="cmt_btn" id="cmt_btn_{$r.id}" onclick="showCommentWin('{$r.id}',$('#record_{$r.id}').val()) " style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px; display:none;">
                <img onmouseover="$(this).parents('.cmt_btn').css('background-color', '#e6e6e6');"
                     onmouseout="$(this).parents('.cmt_btn').css('background-color', 'inherit');"
                     style="padding:0px 5px;width: 24px;height: 34px;cursor: pointer;" src="__IMG__/comment.png"/>
            </div>

        </block>

    </div>



    <!--作者更改条目颜色，弃。
    <div id="color_panel_{$r.id}" class="color_panel" >
        <div onclick="changeTextareaColor(this)"  class="color_ele_1" ></div>
        <div onclick="changeTextareaColor(this)" class="color_ele_2" ></div>
        <div onclick="changeTextareaColor(this)" class="color_ele_3" ></div>
        <div onclick="changeTextareaColor(this)" class="color_ele_4" ></div>
    </div>-->

    <!--自动保存提示语句，弃用，改为统一显示在上边栏-->
    <!--<div id="autoSave_{$r.id}" style="float: left;display: none;">
        √自动保存成功
    </div>-->

    <!--编辑后的成功提示绿色对勾，弃用-->
    <!--<div id="checkmark_{$r.id}" class="green_checkmark" >
        <img src="__IMG__/green_checkmark.jpg" style="height: 30px;width: 30px;">
    </div>-->
</div>

{/in}



{notin name="$r.id" value="$edit_records"}

<div id="oneMsg_{$r.id}" style="float: left;margin:0 0 10px 30px;"
     onmouseover = "$('#pass_btn_{$r.id}').show();hasRecordCmt('{$r.id}');$('#cmt_btn_{$r.id}').show();"
     onmouseout="$('#pass_btn_{$r.id}').hide();$('#cmt_btn_{$r.id}').hide();"><!--满足flex布局的元素块-->

    <div style="position: relative;height: 100px;" class="oneMsg">


        {if condition="$prjInfo['tool_type'] == '共感图'"}

        <div class="tooltip_bottom" style="float:none;">

        <div id="progress_div_{$r.id}" >



            <el-progress id="progress_{$r.id}" style="width: 300px;"
                         :color="color" :percentage="percentage"  :format="format" ></el-progress>


            <textarea disabled style="border:none;cursor:not-allowed;background-image: linear-gradient(#eaeaea 6%, #cbcbcb 95%);/*background-color: rgb(235,235,228);*/" id="record_{$r.id}" class="record_area" >{$r.contents}</textarea>



            <div class="btn_block">
                <div class="pass_btn" id="pass_btn_{$r.id}" @click="passSelection()" style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px; display:none;">
                    {notin name="$_COOKIE['user']" value="$r.adopt"}
                    <img class="pass_img" alt="pass" onmouseover="$(this).parents('.pass_btn').css('background-color', '#dfffda');"
                         onmouseout="$(this).parents('.pass_btn').css('background-color', 'inherit');"
                         style="padding:5px 5px;width: 24px;height: 24px;cursor: pointer;" src="__IMG__/tongguo.png"/>
                    {/notin}

                    {in name="$_COOKIE['user']" value="$r.adopt"}
                    <img class="pass_img" alt="notpass" onmouseover="$(this).parents('.pass_btn').css('background-color', '#dfffda');"
                         onmouseout="$(this).parents('.pass_btn').css('background-color', 'inherit');"
                         style="padding:5px 5px;width: 24px;height: 24px;cursor: pointer;" src="__IMG__/tongguo_selected.png"/>
                    {/in}
                </div>

                <div class="cmt_btn" id="cmt_btn_{$r.id}" onclick="showCommentWin('{$r.id}',$('#record_{$r.id}').val()) " style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px; display:none;">
                    <img onmouseover="$(this).parents('.cmt_btn').css('background-color', '#e6e6e6');"
                         onmouseout="$(this).parents('.cmt_btn').css('background-color', 'inherit');"
                         style="padding:0 5px;width: 24px;height: 34px;cursor: pointer;" src="__IMG__/comment.png"/>
                </div>

            </div>
        </div>

        <script type="module">
            var vm = new Vue({
                el: '#progress_div_{$r.id}',
                data: {
                    crt_adopt_count: '{$r.adopt_count}',
                },
                computed: {
                    // 计算属性的 getter
                    percentage: function () {
                        return  (this.crt_adopt_count/'{$memberSize}')*100;
                    },
                },
                methods: {
                    format() {
                        return  this.crt_adopt_count + '/{$memberSize}' ;
                    },
                    color(){
                        return this.percentage > 50 ? 'green' : 'yellow';
                    },
                    passSelection(){

                        var recordId = '{$r.id}';
                        var userId = "{$_COOKIE['user']}";
                        var _this = this;

                        if($('#pass_btn_' + recordId).children('.pass_img').attr('alt') == 'pass'){
                            $.ajax({
                                type: "POST",
                                url: "__PUBLIC__/index/index/passRecord",
                                data: {
                                    recordId: recordId,
                                    userId: userId
                                },
                                success: function (result) {
                                    $('#pass_btn_' + recordId).children('.pass_img').attr('src','__IMG__/tongguo_selected.png');
                                    $('#pass_btn_' + recordId).children('.pass_img').attr('alt', 'notpass');

                                    _this.crt_adopt_count ++;


                                    var data = new Object();
                                    data.id = recordId;
                                    data.info =_this.percentage;
                                    data.type = "pass";

                                    ws.send(JSON.stringify(data));
                                }
                            });

                        } else{

                            $.ajax({
                                type: "POST",
                                url: "__PUBLIC__/index/index/cancelPassRecord",
                                data: {
                                    recordId: recordId,
                                    userId: userId
                                },
                                success: function (result) {
                                    $('#pass_btn_' + recordId).children('.pass_img').attr('src','__IMG__/tongguo.png');
                                    $('#pass_btn_' + recordId).children('.pass_img').attr('alt', 'pass');

                                    _this.crt_adopt_count --;
                                }
                            });
                        }
                    }
                }
            });

        </script>
            <div class="tooltiptext_bottom" style="font-size:0.8em;left: 13%;width: auto;min-width: initial;">
                "通过"进度, 想"通过"他人便利贴请点击右方 <img style="width: 18px;height:18px;" src="__IMG__/tongguo.png"/>
                图标
            </div>


        </div>



        {else/}


            {if condition="$prjInfo['tool_type'] == 'HMW'"}
            <div style="border:1px solid lightgray;">
                <div style="padding: 3px 0;margin: 0px 5px;">我们应该如何</div>
            </div>
            {/if}


        <textarea disabled style="border:none;cursor:not-allowed;background-image: linear-gradient(#eaeaea 6%, #cbcbcb 95%);/*background-color: rgb(235,235,228);*/" id="record_{$r.id}" class="record_area" >{$r.contents}</textarea>

        <div class="btn_block">
            <div class="cmt_btn" id="cmt_btn_{$r.id}" onclick="showCommentWin('{$r.id}',$('#record_{$r.id}').val()) " style="height: 34px; border-radius: 0px 8px 8px 0px; width: 40px;display:none;">
                <img onmouseover="$(this).parents('.cmt_btn').css('background-color', '#e6e6e6');"
                     onmouseout="$(this).parents('.cmt_btn').css('background-color', 'inherit');"
                     style="padding:0 5px;width: 24px;height: 34px;cursor: pointer;" src="__IMG__/comment.png"/>
            </div>

        </div>
        {/if}


        <!--不显示用户名了-->
        <!--<div class="username_block" style="position:absolute;top:-10%;/*background: url('__IMG__/user_tag.jpg')*/">
            <p >〇&nbsp;<b>{$r.usr_name}</b></p>
        </div>-->


        </div>
</div>

{/notin}





